<template>
    <!-- 常规登入 -->
    <div class="common">
        <h1 class="title">千锋管理系统</h1>
        <!-- 二维码角标 -->
        <i class="iconfont icon-erweimajiaobiao"></i>
        <div class="formBox">
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="captcha" class="captchaInput">
                <el-input @keydown.native.enter="submitForm('loginForm')" maxlength="5" class="captchaText"
                    v-model.number="loginForm.captcha" type="text"></el-input>
                <div v-html="captchaSvg" class="captchaPicture" @click="getCaptcha"></div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>

            </el-form-item>
            <div class="changeLogin" @click="changeMessageLogin = true">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iphone"></use>
                </svg>
                切换短信登入
            </div>
        </div>
    </div>
</template>
<script>
import * as api from '../../api/users'
//校验验证码
var validateCaptcha = (rule, value, callback) => {
    if (value) {
        callback()
    } else {
        callback('请输入验证码')
    }

};
// 校验用户名
var validateUsername = (rule, value, callback) => {
    var uPattern = /^[a-zA-Z0-9_-]{3,16}$/
    //如果校验通过 直接回调callback
    // 校验不通过 callback 中传入参数
    if (uPattern.test(value)) {
        callback()
    } else {
        callback('3-16字母数字下划线')
    }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
    if (value) {
        callback()
    } else {
        callback('请输入密码')
    }
};
export default {
    mounted() {
    },
    created() {
        this.getCaptcha()
    },
    data() {
        return {
            //控制切换短信登入
            changeMessageLogin: true,
            captchaSvg: '',//验证码
            loginForm: {
                username: '',
                password: '',
                captcha: ''
            },
            rules: {
                username: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                captcha: [
                    { validator: validateCaptcha, trigger: 'blur' }
                ]
            }
        };
    },
    //表单验证思路 当前组件的loginForm变化 同步到父组件的loginForm
    //通过watch 深度监听loginForm变化
    watch: {
        loginForm: {
            handler(newVal) {
                // console.log(newVal)
                this.$emit('commonLoginForm', newVal)
            },
            deep: true
        }
    },
    methods: {
        submitForm(formName) {
            // console.log(formName)
            this.$emit('submit')

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getCaptcha() {
            api.getCaptcha()
                .then(res => {
                    this.captchaSvg = res.data.img
                })
        }

    }
}
</script>

<style scoped lang="less">
.icon {
    width: 2em;
    height: 1.5em;
}

.changeLogin {
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/ .icon-erweimajiaobiao {
    font-size: 60px;
    color: white;
    position: absolute;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: 0.7;
}

/deep/ .title {
    text-align: center;
    color: white;
    margin-bottom: 30px;
}

/deep/ .el-form-item {
    margin-bottom: 22px;
    width: 340px;
}

/deep/ .captchaInput {
    width: 340px;

    .el-form-item__content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .captchaText {
        .el-input__inner {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: 0;
        }
    }

    .captchaPicture {
        background-color: #FFF;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;

        svg {
            width: 100%;
            height: 100%;
            text-align: center;
        }

    }


}

/deep/ .el-form-item__content {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>